<template>
  <div class="menus">
    <a-menu v-model:selectedKeys="menuCurrent" mode="horizontal">
      <a-menu-item key="home">
        <router-link to="/home">首页</router-link>
      </a-menu-item>
      <a-menu-item key="signup">
        <router-link to="/signup">我的报名</router-link>
      </a-menu-item>
      <a-menu-item key="user">
        <router-link to="/user">我的信息</router-link>
      </a-menu-item>
    </a-menu>
    <div class="right-bar">
      <a-avatar :size="64">
        <template #icon><UserOutlined /></template>
      </a-avatar>
      <a-dropdown>
        <a class="ant-dropdown-link" @click.prevent>
          Hover me
          <DownOutlined />
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <a href="javascript:;">退出</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import { DownOutlined } from "@ant-design/icons-vue";
export default {
  components: {
    DownOutlined,
  },
  setup() {
    const menuCurrent = ref(["home"]);
    return {
      menuCurrent,
    };
  },
};
</script>

<style scoped>
.menus{
  display: flex;
  justify-content: space-between;
}
</style>